<template>
  <a-layout-sider
    width="310px"
    collapsedWidth="90px"
    v-model:collapsed="collapsed"
    :trigger="null"
    collapsible
    :style="{
      overflow: 'auto',
      height: '100vh',
      position: 'fixed',
      left: 0,
      zIndex: 999,
      background: '#f8e66d',
      boxShadow: '2px 0 6px rgba(0,21,41,.35)',
    }"
  >
    <div class="logo">
      <img src="@/assets/images/logo/logo.png" alt />
      <h1 ref="logoh">Pet Management System</h1>
    </div>
    <a-menu
      :selectedKeys="[$route.path]"
      :defaultSelectedKeys="[this.$route.path]"
      theme="dark"
      mode="inline"
    >
      <a-menu-item key="/home/work">
        <video-camera-outlined />
        <span>
          <router-link to="/home/work">首页</router-link>
        </span>
      </a-menu-item>
      <a-menu-item key="/user/manage">
        <user-outlined />
        <span>
          <router-link to="/user/manage">用户管理</router-link>
        </span>
      </a-menu-item>
      <a-menu-item key="/role/manage">
        <upload-outlined />
        <span>
          <router-link to="/role/manage">角色管理</router-link>
        </span>
      </a-menu-item>
      <a-menu-item key="/cate/manage">
        <upload-outlined />
        <span>
          <router-link to="/cate/manage">宠物分类管理</router-link>
        </span>
      </a-menu-item>
      <a-menu-item key="/carousel/manage">
        <video-camera-outlined />
        <span>
          <router-link to="/carousel/manage">轮播图管理</router-link>
        </span>
      </a-menu-item>
      <a-menu-item key="/pet/manage">
        <upload-outlined />
        <span>
          <router-link to="/pet/manage">宠物发布管理</router-link>
        </span>
      </a-menu-item>
      <a-menu-item key="/forum/manage">
        <upload-outlined />
        <span>
          <router-link to="/forum/manage">论坛管理</router-link>
        </span>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>

<script>
// 导入图标
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from "@ant-design/icons-vue";
// 导入侧边栏方法
import { useSetCollapsed } from "./useSetCollapsed";

export default {
  name: "",
  components: {
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
  },
  setup() {
    // 设置侧边栏
    const { collapsed, logoh } = useSetCollapsed();

    return {
      collapsed, // 侧边栏收缩状态
      logoh, // dom元素
    };
  },
};
</script>
<style scoped lang="less">
.logo {
  height: 50px;
  margin: 35px 16px 35px 16px;
  img {
    float: left;
    height: 50px;
  }
  h1 {
    float: left;
    color: #000;
    margin: 0;
    line-height: 58px;
    margin-left: 15px;
    font-size: 18px;
    transition: all 0.2s;
  }
}
// 菜单栏
.ant-menu {
  background-color: #feb692;
}
// 菜单栏每项
::v-deep(.ant-menu-item) {
  height: 50px;
  span {
    font-size: 16px;
    color: #fff !important;
    a {
      color: #fff !important;
    }
  }
}
// 设置未选中菜单项鼠标滑过样式
::v-deep(.ant-menu-item-active) {
  span {
    color: #000 !important;
    a {
      color: #000 !important;
    }
  }
}
// 选中的菜单
::v-deep(.ant-menu-item-selected) {
  background-color: #fff !important;
  span {
    color: #000 !important;
    a {
      color: #000 !important;
    }
  }
}
// 菜单栏span内容
::v-deep(.ant-menu-title-content) {
  line-height: 50px !important;
}
</style>
